<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>源语|词云|AtomGit</title>
    <style>
        /* 页面整体样式 */
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            background-image: url('img/word_cloud_bg.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
        }

        /* 图片容器样式 */
        .image-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* 图片样式 */
        img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            max-height: 90vh;
            object-fit: contain;
            opacity: 0;
            transition: all 1s ease-in-out;
        }

        /* 动画效果类 */
        .fade-in { opacity: 1; }
        .zoom-in { transform: translate(-50%, -50%) scale(1); }
        .slide-in-top { transform: translate(-50%, -150%); }
        .slide-in-bottom { transform: translate(-50%, 50%); }
        .slide-in-left { transform: translate(-150%, -50%); }
        .slide-in-right { transform: translate(50%, -50%); }
        .rotate-in { transform: translate(-50%, -50%) rotate(360deg); }
        .bounce-in { animation: bounce 1s; }
        /* .flip-in { animation: flip 1s; } */
        .swing-in { animation: swing 1s; }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translate(-50%, -50%); }
            40% { transform: translate(-50%, -60%); }
            60% { transform: translate(-50%, -55%); }
        }

        @keyframes flip {
            0% { transform: translate(-50%, -50%) perspective(400px) rotateY(90deg); }
            100% { transform: translate(-50%, -50%) perspective(400px) rotateY(0deg); }
        }

        @keyframes swing {
            20% { transform: translate(-50%, -50%) rotate(15deg); }
            40% { transform: translate(-50%, -50%) rotate(-10deg); }
            60% { transform: translate(-50%, -50%) rotate(5deg); }
            80% { transform: translate(-50%, -50%) rotate(-5deg); }
            100% { transform: translate(-50%, -50%) rotate(0deg); }
        }
    </style>
</head>

<body>
    <div id="image-container">
        <img id="image" src="" alt="加载中...">
    </div>

    <script>
        const apiSseURL = 'https://wordcloud.atomgit.com/atomgit/get_url/sse';
        var eventSource = new EventSource(apiSseURL);
        
        const animations = [
            'fade-in', 'zoom-in', 'slide-in-top', 'slide-in-bottom', 'slide-in-left',
            'slide-in-right', 'rotate-in', 'bounce-in', 'flip-in', 'swing-in'
        ];

        function applyRandomAnimation(img) {
            // 移除所有动画类
            img.className = '';
            
            // 重置transition以触发新动画
            img.style.transition = 'none';
            img.offsetHeight; // 触发重排
            img.style.transition = 'all 1s ease-in-out';

            // 应用随机动画
            const randomAnimation = animations[Math.floor(Math.random() * animations.length)];
            img.classList.add(randomAnimation);

            // 为某些特殊动画设置初始状态
            if (randomAnimation === 'zoom-in') {
                img.style.transform = 'translate(-50%, -50%) scale(0)';
            } else if (randomAnimation.startsWith('slide-in')) {
                img.style.opacity = '0';
            } else if (randomAnimation === 'rotate-in') {
                img.style.transform = 'translate(-50%, -50%) rotate(0deg)';
            }

            // 触发动画
            setTimeout(() => {
                img.style.opacity = '1';
                img.style.transform = 'translate(-50%, -50%)';
            }, 50);
        }

        eventSource.onmessage = function (event) {
            img_url = JSON.parse(event.data).url
            const img = document.getElementById('image');
            
            if (img_url.length > 0) {
                img.src = img_url;
                img.alt = 'atomgit...';
            } else {
                img.src = 'https://file.pop.atomgit.com/imgs/wordcloud/alice.png';
                img.alt = 'atomgit';
            }

            // 每次接收到数据时应用随机动画
            img.onload = function() {
                applyRandomAnimation(img);
            }
        };

        // 监听错误事件
        eventSource.onerror = function (event) {
            console.error("EventSource failed.");
            eventSource.close();
        };
    </script>
</body>
</html>